<template>
    <div class='detail-content flex'>
        <div class="w-full relative">
            <n-flex align="center" class="cursor-pointer" :size="14" @click="goBack">
                <img class="w-26px h-26px" :src="iconBackarrow" alt="">
                <span class="text-xl text-[#fff] font-bold">咨询导办</span>
            </n-flex>
            <ul class="mt-4" v-if="matterItem.length">
                <li class="item-li" v-for="item in matterItem" :key="item.uuid" @click="openUrlDetail(item.file_or_url)">
                    <span class="text-base text-[#fff] truncate max-w-[90%]">{{ item.name }}</span>
                    <img class="w-20px h-20px" :src="iconArrowR" alt="">
                </li>
            </ul>
            <div class="flex flex-col items-center xy-center" v-else>
                <img class="w-121px h-124px" src="/no-data.png" alt="">
                <span class="text-[#999]">暂无数据</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import iconArrowR from "@/assets/image/icon/icon-arrow-r.png"
    import iconBackarrow from "@/assets/image/icon/icon-backarrow.png"
    import { type MatterItemRes } from "@/api/home"
    
    const props = defineProps<{
        matterItem: MatterItemRes[]
        detailId: string
    }>()

    const route = useRoute()
    const router = useRouter()
    const emit = defineEmits(['update:show'])

    const goBack = () => {
        if(route.query.pageType && route.query.pageType == 'zxb') {
            router.push('/')
        }else {
            emit('update:show', false)
        }
    }

    const openUrlDetail = (url:string) => {
        window.open(url)
    }
</script>

<style lang="scss" scoped>
    .detail-content {
        width: 100%;
        height: calc(100% - 120px);
        margin-top: 19px;
        padding: 26px 11px 18px 24px;
        background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
        border: 2px solid;
        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.43), rgba(255, 255, 255, 0.08)) 1 1;

        ul {
            height: calc(100% - 40px);
            padding-right: 28px;
            overflow-y: auto;
        }

        .item-li {
            display: flex;
            height: 63px;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px dashed rgba(255,255,255,0.3);
            padding: 0 11px;
            cursor: pointer;
            transition: all .3s;

            &:hover {
                background: rgba(255,255,255,0.3);
            }

            &:last-child {
                border-bottom: 0;
            }
        }

        .detail-t {
            position: relative;
            font-size: 16px;
            color: #fff;
            font-weight: 600;
            margin-top: 21px;
            padding-left: 12px;
            
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 4px;
                width: 3px;
                height: 16px;
                background-color: #FFB67A;
            }
        }

        .table-label {
            font-size: 14px;
            color: #fff;
            font-weight: 600;
        }

        .table-val {
            font-size: 14px;
            color: #fff;
        }

        ::v-deep(.n-descriptions-table-wrapper) {
            border: 1px solid #92a2f7 !important;
        }

        ::v-deep(.n-descriptions-table-header) {
            background-color: #536aeb !important;
            border-right: 1px solid #92a2f7 !important;
        }

        ::v-deep(.n-descriptions-table-content) {
            background-color: #5b73f9 !important;
            border-right: 1px solid #92a2f7 !important;
        }
    }
</style>
